<template>
  <div>
    <div>
      <a-row type="flex" justify="space-between" align="middle">
        <div class="">
          <a-input
            class="search-input"
            v-model="model.queryIp"
            placeholder="主机名称"
            allow-clear
            style="width: 190px"
          />
          <a-range-picker
            v-model="model.time"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            @change="onChange"
            :placeholder="['自定义开始时间', '自定义结束时间']"
            class="search-input"
            style="width: 340px"
            show-time
          />
          <a-select
            v-model="model.result"
            placeholder="所有处理操作"
            class="search-input"
            allowClear
          >
            <a-select-option
              v-for="item in virus"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>

          <a-button
            type="primary"
            @click="
              current = 1;
              search();
            "
            >查询
          </a-button>
        </div>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      size="small"
      :pagination="false"
      :loading="loading"
      style="margin-top: 10px"
      rowKey="index"
    >
    </a-table>
    <Pagination
      :total="total"
      :defaultPage="page"
      :defaultCurrent="current"
      @sizeChange="
        (val) => {
          page = val;
          current = 1;
          search();
        }
      "
      @currentChange="currentChange"
    />
  </div>
</template>

<script>
const columns = [
  {
    title: "时间",
    key: "time",
    dataIndex: "time",
  },
  {
    title: "主机名称",
    key: "hostName",
    dataIndex: "hostName",
  },

  {
    title: "攻击类型",
    key: "attackType",
    dataIndex: "attackType",
  },
  {
    title: "用户名",
    key: "userName",
    dataIndex: "userName",
  },
  {
    title: "次数",
    key: "count",
    dataIndex: "count",
  },
  {
    title: "进程名称",
    key: "processName",
    dataIndex: "processName",
  },
  {
    title: "处理操作",
    key: "record",
    dataIndex: "record",
  },
  {
    title: "威胁命令行",
    key: "commandLine",
    dataIndex: "commandLine",
  },
];
import Pagination from "@/components/Pagination.vue";
import { mockMalware } from "@/config/main/data/malware";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      columns,
      loading: false,
      data: mockMalware,
      page: 10,
      current: 1,
      total: 5,
      model: {
        queryIp: "",
        time: undefined,
        result: undefined,
        queryBeginTime: "",
        queryEndTime: "",
      },
      visible: false,
      virus: [
        {
          label: "仅处理",
          value: "仅处理",
        },
        {
          label: "阻止",
          value: "阻止",
        },
      ],
    };
  },
  methods: {
    onChange(e) {
      console.log(e);
      if (e[0]) {
        this.model.queryBeginTime = e[0];
        this.model.queryEndTime = e[1];
      } else {
        this.model.queryBeginTime = "";
        this.model.queryEndTime = "";
      }
    },
    currentChange(val) {
      this.current = val;
      this.search();
    },
    search() {
      console.log(this.model);
    },
  },
};
</script>
